<!-- 菜单类型 - 目录 -->
<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-form-item label="菜单图标">
                <OperateMenuIcon :form="form" :billState="billState"></OperateMenuIcon>
            </el-form-item>
        </el-col>
        <el-col :md="24" :lg="12">
            <el-form-item label="菜单名称" prop="title">
                <el-input v-model="form.title" placeholder="" :readonly="billState"></el-input>
            </el-form-item>
        </el-col>
        <el-col :md="24" :lg="12">
            <el-form-item label="显示排序" prop="sort">
                <el-input v-model.number="form.sort" placeholder="" :readonly="billState"></el-input>
            </el-form-item>
        </el-col>
        <el-col :md="24" :lg="12">
            <el-form-item label="是否外链">
                <el-radio-group v-model="form.externalLink" :disabled="billState">
                    <el-radio :value="true">是</el-radio>
                    <el-radio :value="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :md="24" :lg="12">
            <el-form-item label="路由地址" prop="path">
                <el-input v-model="form.path" placeholder="" :readonly="billState"></el-input>
            </el-form-item>
        </el-col>
        <el-col :md="24" :lg="12">
            <el-form-item label="显示状态">
                <el-radio-group v-model="form.showState" :disabled="billState">
                    <el-radio :value="true">显示</el-radio>
                    <el-radio :value="false">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :md="24" :lg="12">
            <el-form-item label="菜单状态">
                <el-radio-group v-model="form.state" :disabled="billState">
                    <el-radio :value="true">正常</el-radio>
                    <el-radio :value="false">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
    </el-row>
</template>

<script setup>
import OperateMenuIcon from './operate-menu-icon.vue';
let catalogueInfo = defineProps({
    form: {
        type: Object,
        default: () => {}
    },
    
    billState: {
        type: Boolean,
        default: false
    }
})
</script>

<style lang="scss" scoped>

</style>